<template>
  <div id="body">
    <TopTitle :texttitle="'地图找房'"></TopTitle>
    <div id="container"></div>
    <div class="show" v-show="show">
      <div class="map-title">
        <h4>房屋列表</h4>
        <p @click="$router.push('/home/list')">更多房源</p>
      </div>
      <div class="map-list">
          <HouseList :renderList="renderList"></HouseList>
      </div>
    </div>
  </div>
</template>

<script>
import { areamap, housesList } from '@/api/Interface'
import TopTitle from '@/components/TopTitle.vue'
import HouseList from '@/components/HouseList.vue'
 
export default {
  components: {
    TopTitle,
    HouseList,
  },
  data() {
    return {
      mapcoord: [],
      show: false,
      renderList:[]
    }
  },
  created() {},

  async mounted() {
    let that = this
    const res = await areamap(
      JSON.parse(localStorage.getItem('labelCity')).value
    )
    this.mapcoord = res.body
    let map = new BMapGL.Map('container')
    // 第一层事件获取信息封装
    function mapText(latitude, longitude, context, id, multiple = 10) {
      var point = new BMapGL.Point(latitude, longitude)
      map.centerAndZoom(point, multiple)
      var label = new BMapGL.Label(context, {
        // 创建文本标注
        position: point, // 设置标注的地理位置
        offset: new BMapGL.Size(10, 20), // 设置标注的偏移量
      })
      map.addOverlay(label) // 将标注添加到地图中
      // 样式
      // label.target.id = '1234'
      label.setStyle({
        // 设置label的样式
        padding: 0,
        margin: 0,
        color: '#fff',
        fontSize: '12px',
        border: '2px solid hsla(0,0%,100%,.8)',
        height: '70px',
        width: '70px',
        textAlign: 'center',
        paddingTop: '20px',
        borderRadius: '50%',
        boxSizing: 'border-box',
        backgroundColor: '#21b97a',
      })
      // 绑定事件
      label.id = id
      label.addEventListener('click', async (e) => {
        map = new BMapGL.Map('container')
        console.log(e.target.id)
        const data = await areamap(e.target.id)
        console.log(data.body)
        data.body.map((item, index) => {
          console.log(item)
          function mapText(latitude, longitude, context, id, multiple = 10) {
            var point = new BMapGL.Point(latitude, longitude)
            map.centerAndZoom(point, multiple)
            var label = new BMapGL.Label(context, {
              // 创建文本标注
              position: point, // 设置标注的地理位置
              offset: new BMapGL.Size(10, 20), // 设置标注的偏移量
            })
            map.addOverlay(label) // 将标注添加到地图中
            // 样式
            // label.target.id = '1234'
            label.setStyle({
              // 设置label的样式
              padding: 0,
              margin: 0,
              color: '#fff',
              fontSize: '12px',
              border: '2px solid hsla(0,0%,100%,.8)',
              height: '70px',
              width: '70px',
              textAlign: 'center',
              paddingTop: '20px',
              borderRadius: '50%',
              boxSizing: 'border-box',
              backgroundColor: '#21b97a',
            })
            // 绑定事件
            label.id = id
            label.addEventListener('click', async (e) => {
              map = new BMapGL.Map('container')
              console.log(e.target.id)
              const data = await areamap(e.target.id)
              console.log(data.body)
              // 第二次事件获取封装
              function mapText(
                latitude,
                longitude,
                context,
                id,
                multiple = 10
              ) {
                var point = new BMapGL.Point(latitude, longitude)
                map.centerAndZoom(point, multiple)
                var label = new BMapGL.Label(context, {
                  // 创建文本标注
                  position: point, // 设置标注的地理位置
                  offset: new BMapGL.Size(10, 20), // 设置标注的偏移量
                })
                map.addOverlay(label) // 将标注添加到地图中
                // 样式
                // label.target.id = '1234'
                label.setStyle({
                  // 设置label的样式
                  padding: 0,
                  margin: 0,
                  color: '#fff',
                  fontSize: '12px',
                  border: '2px solid hsla(0,0%,100%,.8)',
                  // height: '70px',
                  // width: '70px',
                  textAlign: 'center',
                  paddingTop: '20px',
                  boxSizing: 'border-box',
                  backgroundColor: '#21b97a',
                })
                // 绑定事件
                label.id = id
                label.addEventListener('click', async (e) => {
                  console.log(e.target.id)
                  const { body } = await housesList({ cityId: e.target.id })
                  console.log(body)
                  that.show = true
                  that.renderList = body.list
                })
              }
              data.body.map((item, index) => {
                console.log(item)
                mapText(
                  (+item.coord.longitude).toFixed(2),
                  (+item.coord.latitude).toFixed(2),
                  `<span class="maspan-title">${item.label}</span><br><span class="maspan-countnum">${item.count}套</span>`,
                  item.value,
                  13
                )
              })
            })
          }
          mapText(
            (+item.coord.longitude).toFixed(2),
            (+item.coord.latitude).toFixed(2),
            `<span class="maspan-title">${item.label}</span><br><span class="maspan-countnum">${item.count}套</span>`,
            item.value,
            13
          )
        })
      })
    }
    // mapText(116.404, 39.915,`<span class="maspan-title">杨浦</span><br><span class="maspan-countnum">255套</span>`,"AREA|25fe0fdc-e9a1-982f")
    // mapText(121.53, 31.29,`<span class="maspan-title">杨浦</span><br><span class="maspan-countnum">255套</span>`,"AREA|25fe0fdc-e9a1-982f")
    console.log(res.body)
    this.mapcoord.map((item, index) => {
      mapText(
        (+item.coord.longitude).toFixed(2),
        (+item.coord.latitude).toFixed(2),
        `<span class="maspan-title">${item.label}</span><br><span class="maspan-countnum">${item.count}套</span>`,
        item.value,
        10
      )
    })
  },
}
</script>

<style scoped lang="less">
*{
  margin: 0;
  padding: 0;
}
.map-title {
  padding: 0 !important;
  margin: 0 !important;
}
.map-countnum {
  padding: 0 !important;
  margin: 0 !important;
}
#container {
  height: 100vh;
}
#body{
  position: relative;
}
.show {
  z-index: 100;
  position: absolute;
  left: 0;
  top: 50%;
  height: 50vh;
  width: 100vw;
  background-color: #fff;
  .map-title {
    height: 65px;
    width: 100%;
    background-color: #c0c0c2;
    display: flex;
    justify-content: space-between;
    h4 {
      margin-left: 10px;
      line-height: 65px;
      height: 65px;
    }
    p {
      margin-left: 10px;
      margin-top: 5px;
      height: 65px;
    }
  }
  .map-list{
    // border: 1px solid rgba(0, 0, 0, 0);
    overflow: hidden;
    // min-height: 330px;
    // height: 0;
  }
}
</style>
